<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript">
    require([ "dojo/_base/array", "dojo/_base/xhr", "dojo/request", "dojo/topic", "dojo/json" ], function(array, xhr,
            request, topic, JSON) {
        var syncDB = function(url, jsonData) {
            request.post(url, {
                data : jsonData,
                headers : {
                    'Content-Type' : "application/json; charset=utf-8"
                },
                timeout : 30000
            }).then(function(response) {
                topic.publish("notifyMsgTopic", {
                    message : response,
                    type : "message",
                    duration : 1000
                });
                jQuery("#sysroleuserInGird").trigger("reloadGrid");
                jQuery("#sysroleuserOutGird").trigger("reloadGrid");
            }, function(error) {
                alert(error);
            });
        };
        sysroleuserSubmitForm = function() {
            var id = jQuery("#sysroleuserGird").jqGrid('getGridParam', 'selrow');
            if (id == null) {
                alert('请选择一个用户!');
            } else {
                var inIds = jQuery("#sysroleuserInGird").jqGrid("getGridParam", "selarrrow") || [];
                var outIds = jQuery("#sysroleuserOutGird").jqGrid("getGridParam", "selarrrow") || [];
                if (inIds.length == 0 && outIds.length == 0) {
                    alert('请选择添加或移除至少一个角色!');
                } else {
                    var sysroleuserList = [];
                    var sysuser = jQuery("#sysroleuserGird").jqGrid('getRowData', id);
                    for ( var i = 0; i < inIds.length; i++) {
                        var sysrole = jQuery("#sysroleuserInGird").jqGrid('getRowData', inIds[i]);
                        var sysroleuser = {
                            userid : sysuser.userId,
                            roleid : sysrole.roleid,
                            type : 'in'
                        };
                        sysroleuserList.push(sysroleuser);
                    }
                    for ( var i = 0; i < outIds.length; i++) {
                        var sysrole = jQuery("#sysroleuserOutGird").jqGrid('getRowData', outIds[i]);
                        var sysroleuser = {
                            userid : sysuser.userId,
                            roleid : sysrole.roleid,
                            type : 'out'
                        };
                        sysroleuserList.push(sysroleuser);
                    }
                    var url = "sysroleuser/insert";
                    syncDB(url, JSON.stringify(sysroleuserList));
                }
            }
        };
    });
</script>
<fieldset>
  <legend>&nbsp;&nbsp;操作&nbsp;&nbsp;</legend>
  <p style="font-size: 1em; font-weight: bolder; color: blue; text-indent: 2em;">选择一个用户, 中间列表显示已拥有的角色,
    右侧列表显示可分配角色列表, 勾选中间列表选项保存时将去除勾选的角色, 右侧列表与之相反. 点击'保存'按钮进行用户角色分配!</p>
  <div style="padding: 5px;">
    <button data-dojo-type="dijit/form/Button" type="button" label="保存" onclick="sysroleuserSubmitForm();"></button>
  </div>
</fieldset>
<div style="float: left; width: 300px;">
  <table id="sysroleuserGird"></table>
  <div id="sysroleuserToolbar"></div>
</div>
<div style="float: left; margin-left: 3%; width: 300px;">
  <table id="sysroleuserInGird"></table>
  <div id="sysroleuserInToolbar"></div>
</div>
<div style="float: right; width: 300px;">
  <table id="sysroleuserOutGird"></table>
  <div id="sysroleuserOutToolbar"></div>
</div>
<script type="text/javascript">
    jQuery("#sysroleuserGird").jqGrid({
        url : 'sysuser/queryAsList',
        datatype : "json",
        autowidth : true,
        rownumbers : true,
        height : 300,
        colNames : [ '用户ID', '用户名称' ],
        colModel : [ {
            name : 'userId',
            index : 'userId',
            width : 60,
            key : true,
            hidden : true,
            align : 'center'
        }, {
            name : 'username',
            index : 'username',
            width : 230
        } ],
        rowNum : 15,
        rowList : [ 15, 20, 25, 30 ],
        pager : '#sysroleuserToolbar',
        recordpos : 'right',
        viewrecords : false,
        sortorder : "desc",
        jsonReader : {
            repeatitems : false
        },
        multiselect : false,
        shrinkToFit : false,
        onSelectRow : function(ids) {
            if (ids != null) {
                var sysuser = jQuery("#sysroleuserGird").jqGrid('getRowData', ids);
                jQuery("#sysroleuserInGird").jqGrid('setGridParam', {
                    postData : {
                        userid : sysuser.userId
                    }
                }).trigger('reloadGrid');
                jQuery("#sysroleuserOutGird").jqGrid('setGridParam', {
                    postData : {
                        userid : sysuser.userId
                    }
                }).trigger('reloadGrid');
            }
        },
        caption : "用户列表"
    });
    jQuery("#sysroleuserGird").jqGrid('navGrid', '#sysroleuserToolbar', {
        edit : false,
        add : false,
        del : false,
        search : false,
        refresh : true
    });
    jQuery("#sysroleuserInGird").jqGrid({
        url : 'sysroleuser/queryAsList/in',
        datatype : "json",
        autowidth : true,
        rownumbers : false,
        height : 300,
        colNames : [ '角色ID', '角色名称', '描述' ],
        colModel : [ {
            name : 'roleid',
            index : 'roleid',
            width : 60,
            key : true,
            hidden : true,
            align : 'center'
        }, {
            name : 'rolename',
            index : 'rolename',
            width : 100
        }, {
            name : 'description',
            index : 'description',
            width : 150
        } ],
        rowNum : 15,
        rowList : [ 15, 20, 25, 30 ],
        pager : '#sysroleuserInToolbar',
        recordpos : 'right',
        viewrecords : false,
        sortorder : "desc",
        jsonReader : {
            repeatitems : false
        },
        multiselect : true,
        shrinkToFit : false,
        caption : "拥有角色列表"
    });
    jQuery("#sysroleuserInGird").jqGrid('navGrid', '#sysroleuserInToolbar', {
        edit : false,
        add : false,
        del : false,
        search : false,
        refresh : true
    });
    jQuery("#sysroleuserOutGird").jqGrid({
        url : 'sysroleuser/queryAsList/out',
        datatype : "json",
        autowidth : true,
        rownumbers : false,
        height : 300,
        colNames : [ '角色ID', '角色名称', '描述' ],
        colModel : [ {
            name : 'roleid',
            index : 'roleid',
            width : 60,
            key : true,
            hidden : true,
            align : 'center'
        }, {
            name : 'rolename',
            index : 'rolename',
            width : 100
        }, {
            name : 'description',
            index : 'description',
            width : 150
        } ],
        rowNum : 15,
        rowList : [ 15, 20, 25, 30 ],
        pager : '#sysroleuserOutToolbar',
        recordpos : 'right',
        viewrecords : false,
        sortorder : "desc",
        jsonReader : {
            repeatitems : false
        },
        multiselect : true,
        shrinkToFit : false,
        caption : "未包含角色列表"
    });
    jQuery("#sysroleuserOutGird").jqGrid('navGrid', '#sysroleuserOutToolbar', {
        edit : false,
        add : false,
        del : false,
        search : false,
        refresh : true
    });
</script>
